<template>
	<view class="container">
		<view class="classificate plr-30 pt-30">
			<view class="my_title flex flex-start">
				我的分类<view class="size-20 gray-1">（长按可拖动顺序）</view>
			</view>
			<view class="sort_cont plr-20 ptb-20">
				<view class="default flex">
					<view class="default_item ptb-20">我的关注</view>
					<view class="default_item ptb-20" >推荐</view>
					<view class="default_item ptb-20">全部</view>
				</view>
				<view class="sort_info">
					<view class="sort_item ptb-20" v-for="item in sortarr" @click="deletefn(item)">
						{{item.name}}
						<image src="../../static/blindbox/fU.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="classificate plr-30 pt-30">
			<view class="my_title flex flex-start">
				其他分类
			</view>
			<view class="sort_cont plr-20 ptb-20">
				<view class="sort_info">
					<view class="sort_item ptb-20" v-for="item in otherarr" @click="addfn(item)">
						{{item.name}}
						<image src="../../static/blindbox/k3.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortarr:[
					// {index:0,val:'山海经'},
					// {index:1,val:'民族瑰宝'},
					// {index:2,val:'文化长廊'},
					// {index:3,val:'数字艺术'},
					// {index:4,val:'非遗典藏'},
					// {index:5,val:'初窥门径'},
					// {index:6,val:'文旅名胜'},
					// {index:7,val:'影音世界'},
					// {index:8,val:'金石篆刻'},
					// {index:9,val:'数字潮玩'},
					// {index:10,val:'元宇宙'},
					// {index:11,val:'数字盲盒'},
				],
				otherarr:[
					// {index:0,val:'山海经'}
				]
			}
		},
		onShow() {
			 
			this.classificate()
		},
		methods: {
			classificate(){
				this.$http('api/trade/categoryList', this.query).then(res => {
					// console.log(res);
					this.sortarr = res
				})
			},
			deletefn(item){
				var new_sortarr=this.sortarr.splice(item.index,1)
				for(let i=0;i<this.sortarr.length;i++){
					if(this.sortarr[i].index>item.index){
						this.sortarr[i].index--
					}
				}
				this.otherarr.push({
					index:this.otherarr.length,
					name:item.name
				})
			},
			addfn(item){
				var new_otherarr=this.otherarr.splice(item.index,1)
				for(let i=0;i<this.otherarr.length;i++){
					if(this.otherarr[i].index>item.index){
						this.otherarr[i].index--
					}
				}
				this.sortarr.push({
					index:this.sortarr.length,
					name:item.name
				})
			},
			backfn(){
				uni.navigateBack({})
			},
		}
	}
</script>

<style lang="less" scoped>
page{
	background-color: #F5F5F5;
}
.container{
	width: 100%;
	.classificate{
		.my_title{
			font-weight: 600;
		}
		.sort_cont{
			.default{
				.default_item{
					background-color: rgb(253, 253, 253);
					width: 30%;
					color: rgb(149, 149, 149);
					text-align: center;
					border-radius: 10rpx;
				}
			}
			.sort_info{
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 10rpx;
				.sort_item{
					background-color: #fff;
					width: 30%;
					color: #000;
					text-align: center;
					border-radius: 10rpx;
					margin: 10rpx;
					position: relative;
					image{
						width: 40rpx;
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}
	}
}
</style>
